<template>
  <div class="app-container">
    <div class="search" style="display: flex;">
      <span class="label">登录账户：</span>
      <el-input
        v-model="form.phone"
        class="input"
        placeholder="账户"
        clearable
      />
      <span class="label">真实姓名：</span>
      <el-input
        v-model="form.name"
        class="input"
        placeholder="姓名"
        clearable
      />
      <el-button type="primary" @click="setResult">查询</el-button>
      <el-button type="primary" @click="reset">重置</el-button>
      <el-button type="primary" @click="handleSave({})">新增</el-button>
    </div>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column prop="name" label="姓名" width="" />
      <el-table-column prop="city" label="填报单位" width="">
        <template slot-scope="scope">
          <div>
            {{ scope.row.district && scope.row.district.name }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="email" label="邮箱" />
      <el-table-column prop="phone" label="手机号" />
      <el-table-column label="操作" width="210" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="handleSave(scope.row)">编辑</el-button>
          <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination :total="total" :limit="10" :background="false" :page="currentPage" @pagination="handleCurrentChange" @pageSize="handleSizeChange" />
    <Save v-if="editVisible" :item="item" :edit-visible="editVisible" @changeResult="changeResult" />
  </div>
</template>
<script>
import { getAccount, deleteAccount } from '@/api/authority'
import Save from './save.vue'
export default {
  components: {
    Save
  },
  data() {
    return {
      form: {
        phone: '',
        name: ''
      },
      item: {},
      editVisible: false,
      total: 0,
      currentPage: 1,
      pageSizes: 10,
      tableData: []
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    setResult() {
      this.currentPage = 1
      this.fetchData()
    },
    handleSave(row) {
      this.item = row
      this.editVisible = true
    },
    handleDelete(row) {
      this.$confirm('是否确认删除该账号', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteAccount({ id: row.id }).then(res => {
          if (res.status === 200) {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.fetchData()
          }
        })
      })
    },
    handleCurrentChange(val) {
      this.currentPage = val.page
      this.fetchData()
    },
    handleSizeChange(val) {
      this.pageSizes = val.limit
      this.fetchData()
    },
    changeResult(data) {
      this.editVisible = false
      if (data) {
        this.fetchData()
      }
    },
    reset() {
      this.currentPage = 1
      this.form = {
        phone: '',
        name: ''
      }
      this.fetchData()
    },
    fetchData() {
      this.listLoading = true
      getAccount({ ...this.form, page: this.currentPage, page_size: this.pageSizes }).then(response => {
        this.tableData = response.data
        this.total = response.pagination.total
        this.currentPage = response.pagination.current_page
        // this.listLoading = false
      })
    }
  }

}
</script>
<style lang="scss" scoped>
.search {
  align-items: center;
  margin-bottom: 20px;
}
.label {
  margin-right: 10px;
}

.input {
  width: 200px;
  margin-right: 30px;
}
</style>
